<template>
	<div>
		<div class="cate-selector">
			<div class="tree">
				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
			</div>

			<div class="goods"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, toRaw } from "vue";
interface Tree {
	label: string;
	children?: Tree[];
}
const handleNodeClick = (data: Tree) => {
	console.log(data);
};
const data: Tree[] = [
	{
		label: "Level one 1",
		children: [
			{
				label: "Level two 1-1",
				children: [
					{
						label: "Level three 1-1-1"
					}
				]
			}
		]
	},
	{
		label: "Level one 2",
		children: [
			{
				label: "Level two 2-1",
				children: [
					{
						label: "Level three 2-1-1"
					}
				]
			},
			{
				label: "Level two 2-2",
				children: [
					{
						label: "Level three 2-2-1"
					}
				]
			}
		]
	},
	{
		label: "Level one 3",
		children: [
			{
				label: "Level two 3-1",
				children: [
					{
						label: "Level three 3-1-1"
					}
				]
			},
			{
				label: "Level two 3-2",
				children: [
					{
						label: "Level three 3-2-1"
					}
				]
			}
		]
	}
];
const defaultProps = {
	children: "children",
	label: "label"
};
</script>

<style lang="scss" scoped>
.cate-selector {
	display: flex;
	.tree {
		flex: 1;
		border: 1px solid var(--el-color-primary);
		padding: 10px;
		border-radius: 10px;
		height: 500px;
		overflow: auto;
	}
	.goods {
		flex: 3;
	}
}
</style>
